<template>
  <div>
    <p-form-model
      :model="form"
      :rules="rules"
      layout="inline"
      class="connect-div"
    >
      <p-form-model-item label="销售组">
        <SelectDefault v-model="form.state" code="state" />
      </p-form-model-item>
      <p-form-model-item label="ModelName" style="width: 50%">
        <SelectDefault v-model="form.state" code="state" />
      </p-form-model-item>
      <p-form-model-item label="机种">
        <SelectDefault v-model="form.state" code="state" />
      </p-form-model-item>
    </p-form-model>
    <p-form-model
      :model="form"
      :rules="rules"
      layout="inline"
      class="connect-div"
    >
      <p-form-model-item label="客户简称">
        <SelectDefault v-model="form.state" code="state" />
      </p-form-model-item>
      <div style="width: 50%">
        <p-form-model-item label="应用别" style="width: 46%">
          <SelectDefault v-model="form.state" code="state" />
        </p-form-model-item>
        <p-form-model-item label="形态" style="width: 46%">
          <SelectDefault v-model="form.state" code="state" />
        </p-form-model-item>
      </div>
      <p-form-model-item label="生产地">
        <SelectDefault v-model="form.state" code="state" />
      </p-form-model-item>
    </p-form-model>
  </div>
</template>
<script>
const defaultForm = {
  name: '',
  state: '',
  node: '',
  salesOrganization: '',
};
export default {
  data() {
    return {
      col: 4,
      row: 1,
      gutter: 24,
      form: {
        ...defaultForm,
      },
    };
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleReset() {
      this.form = { ...defaultForm };
      this.$emit('search', this.form);
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  padding: 0 10px;
  width: 100%;
}
.poros-form-item {
  width: 25%;
  margin-bottom: 0;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 100px);
}
.btn-search {
  margin-right: 16px;
}
.connect-div {
  width: 85%;
  height: 35px;
  //   display: flex;
  //   justify-content: space-around;
}
</style>
